<template>
    <div class="nav-bar">
        <div class="left"><slot name="left"><span @click="goback"><i class="iconfont icon-fanhui"></i></span></slot></div>
        <div class="center"><slot>MY商店</slot></div>
        <div class="right"><slot name="right"></slot></div>
    </div>
</template>

<script>
import {useRouter} from 'vue-router';
export default {
    
    name:"NavBar",
    setup() {
        const router = useRouter();
        const goback = ()=>{
            router.go(-1);
        }

        return {
            goback
        }
        
    },
}
</script>

<style scoped>
.nav-bar {
    display: flex;   /* 弹性布局 */
    background-color: var(--color-tint);
    color: aliceblue;
    position: fixed;     /* 固定位置 */
    left:0px;
    right: 0px;
    top: 0px;
    height: 45px;
    line-height: 45px;    /* 行高 固定会垂直居中*/
    text-align: center;
    z-index: 99;
    box-shadow: 0 2px 0px rgba(100, 100, 100, 0.1);
}
    .left, .right{
        width: 60px;
    }
    .center {
        flex:1;   /* 填充满 */
    }
</style>